<template>
  <div>
    <div>
      <Breadcrumb :breadList="breadList"></Breadcrumb>
    </div>
    <!--搜索框-->
    <div>
      <el-row :gutter="20">
        <el-col :span="4">
          品牌名称:
          <el-input type="text" size="mini" style="width: 70%"></el-input>
        </el-col>
        <el-col :span="4">
          机器型号:
          <el-input type="text" size="mini" style="width: 70%"></el-input>
        </el-col>
        <el-col :span="4">
          状态:
          <el-input type="text" size="mini" style="width: 70%"></el-input>
        </el-col>
      </el-row>
      <div align="left">
        <el-button size="mini" type="primary">搜索</el-button>
        <el-button size="mini">清除</el-button>
      </div>
      <div align="left">
        <el-button size="mini" type="primary" @click="addPrinterVisible=true">新增</el-button>
      </div>
    </div>
    <!--新增机器-->
    <div>
      <el-dialog v-model="addPrinterVisible" title="新增机器" width="30%" center>
        <el-form ref="form" :model="formData" label-width="120px">
          <el-form-item label="品牌">
            <el-input v-model="formData.brand"></el-input>
          </el-form-item>
          <el-form-item label="型号">
            <el-input v-model="formData.model"></el-input>
          </el-form-item>
          <el-form-item label="状态">
            <el-select v-model="formData.status" placeholder="请选择状态">
              <el-option label="空闲" value="free"></el-option>
              <el-option label="在借" value="borrowing"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="备注">
            <el-input v-model="formData.remark" type="textarea"></el-input>
          </el-form-item>
        </el-form>
        <template #footer>
          <span class="dialog-footer">
            <el-button type="primary" @click="addPrinterVisible = false">确认</el-button>
            <el-button @click="addPrinterVisible = false">取消</el-button>
          </span>
        </template>
      </el-dialog>
    </div>
    <!--机器列表-->
    <div>
      <el-table :data="tableData" height="600" border style="width: 100%">
        <el-table-column prop="index" label="序号" width="80" />
        <el-table-column prop="brand" label="品牌" width="180" />
        <el-table-column prop="model" label="机器型号" width="180" />
        <el-table-column prop="status" label="状态" width="180" />
        <el-table-column prop="remark" label="备注" width="180" />
        <el-table-column label="操作" width="120">
          <template #default>
            <el-button type="text" size="small">编辑</el-button>
            <el-button type="text" size="small">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination background layout="prev, pager, next" :total="1000"></el-pagination>
    </div>
  </div>
</template>

<script>
import Breadcrumb from "@/components/Breadcrumb";
export default {
  name: 'Printer',
  components: {
    Breadcrumb
  },
  data() {
    return {
      addPrinterVisible: false,
      formData: {
        uuid:'',
        brand: '',
        model: '',
        status: '',
        remark: ''
      },
      breadList: [
        'homePage',
        '机器管理'
      ],
      tableData: []
    }
  }
}
</script>
